<template>
  <div class="content-box">
    <div class="content-box-title">
      <el-header>
        <el-row  style="display:flex;align-items:center;width: 100%;border-bottom: 1px solid #cccccc;padding:9px 0 8px 0">
          <el-col :span="12">
            {{title}}
          </el-col>
          <el-col :span="12">
            <div style="text-align: right">
              <el-button-group>
                <el-button type="primary" >保存</el-button>
                <el-button type="primary" >保存并返回</el-button>
                <el-button @click="routeBack">返回</el-button>
              </el-button-group>
            </div>
          </el-col>
        </el-row>
      </el-header>
    </div>
    <div class="content-box-main">
      <el-form
          v-model="formData"
          ref="formDataRef"
          label-width="110px"
          label-suffix="："
      >
        <div class="form-title">基本信息</div>
        <el-row>
          <el-col :span="20">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="员工编码">
                  <el-input v-model="formData.code" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="员工名称">
                  <el-input v-model="formData.name" placeholder="请输入员工名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="租户类型">
                  <el-input v-model="formData.name" placeholder="请输入员工名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="租户名称">
                  <el-input v-model="formData.name" placeholder="请输入员工名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="主机构">
                  <el-input v-model="formData.name" placeholder="请输入员工名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="主职务">
                  <el-input v-model="formData.name" placeholder="请输入员工名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="">
                  <el-input v-model="formData.name" type="textarea" :autosize="{minRow:4,maxRow: 4}" placeholder="请输入员工名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="登录账号">
                  <el-input v-model="formData.name" placeholder="请输入登录账号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="手机号码">
                  <el-input v-model="formData.name" placeholder="请输入手机号码"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="状态">
                  <el-select v-model="formData.status" placeholder="请选择状态">
                    <el-option value="启用"></el-option>
                    <el-option value="停用"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="排序">
                  <el-input v-model="formData.name" placeholder="请输入排序"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="英文名称">
                  <el-input v-model="formData.name" placeholder="请输入英文名称"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-image style="width: 100px; height: 100px" :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'" />
          </el-col>
        </el-row>

        <div class="form-title">附加信息</div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="境内境外">
              <el-input v-model="formData.name" placeholder="请输入登录账号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别">
              <el-input v-model="formData.name" placeholder="请输入登录账号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入职时间">
              <el-input v-model="formData.name" placeholder="请输入登录账号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="籍贯">
              <el-input v-model="formData.name" placeholder="请输入登录账号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="政治面貌">
              <el-input v-model="formData.name" placeholder="请输入登录账号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱地址">
              <el-input v-model="formData.name" placeholder="请输入登录账号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="办公电话">
              <el-input v-model="formData.name" placeholder="请输入登录账号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出生日期">
              <el-input v-model="formData.name" placeholder="请输入登录账号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号">
              <el-input v-model="formData.name" placeholder="请输入登录账号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学历">
              <el-input v-model="formData.name" placeholder="请输入登录账号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="form-title">角色信息</div>
        <el-row class="table-box">
          <el-table :data="roleTable" border>
            <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
            <el-table-column label="角色编码" width="200" align="center"></el-table-column>
            <el-table-column label="角色名称" width="200" align="center"></el-table-column>
            <el-table-column label="授权方式" width="200" align="center"></el-table-column>
            <el-table-column label="操作" width="200" align="center">
              <template v-slot="{row}">
                <el-button link type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {useRoute} from "vue-router";

const title = ref('')
const formDataRef = ref()
const formData = reactive({

})
const roleTable = ref([{}])
const route = useRoute()
onMounted(()=>{
  const {id} = route.query
  if (id){
    title.value = '编辑用户信息'
    init(id)
  }else{
    title.value = '新增用户信息'
  }
})
const init = (id)=>{

}
</script>

<style scoped lang="scss">
.content-box{
  padding: 10px;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  .content-box-title{
    height: 50px;

    .title-info-box{
      flex: 1;
    }

    .btn-box{
      width: 100px;
    }
  }
  .content-box-main{
    overflow: auto;
    flex-grow: 1;
    padding: 20px;

    .el-row{
      padding-top: 10px;
    }
  }
}
</style>
